<template>
  <div class="simulator_container" @mousemove="handleMouseMove">
    <el-menu
      :default-active="activeIndex"
      background-color="#202127"
      text-color="white"
      mode="horizontal"
      @select="handleSelect"
      class="my_menu"
    >
      <el-menu-item index="/learning/simulator/UpperDu">UPPER DU</el-menu-item>
      <el-menu-item index="/learning/simulator/fltctl">FLT CTL</el-menu-item>
      <el-menu-item index="/learning/simulator/fuel">FUEL</el-menu-item>
      <el-menu-item index="/learning/simulator/elec">ELEC</el-menu-item>
      <el-menu-item index="/learning/simulator/hyd">HYD</el-menu-item>
    </el-menu>
    <span
      v-if="route.path !== '/learning/simulator/fltctl'"
      class="training-notice"
      >仅供培训使用</span
    >
    <router-view />
    <div
      class="overlay"
      :style="{ top: `${position.top}px`, left: `${position.left}px` }"
      @mousedown="onMouseDown"
    >
      <Tips
        ref="tipsRef"
        :toRight="toRight"
        :toBottom="toBottom"
        :message="message"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import Tips from "./components/other/Tips.vue";

const leftMargin = ref(591);
const bottomMargin = ref(591);
const tipsRef = ref(null);

const toBottom = ref(false);
const toRight = ref(false);
const message = ref(
  "快捷键：\nF1：启动\nF2：减速\nF3：加速\nF4：最大推力\nF5：襟翼全收\nF6：收襟翼\nF7：放襟翼\nF8：襟翼全放\nF9：关车\nG：收放起落架"
);

const route = useRoute();
const activeIndex = ref("");

// 监听路由变化更新激活项
watch(
  () => route.path,
  (newPath) => {
    activeIndex.value = newPath;
  },
  { immediate: true }
);

const position = reactive({
  top: 0,
  left: 0,
});
const dragging = ref(false);
const offset = reactive({ x: 0, y: 0 });
const router = useRouter();

// 在组件挂载时恢复位置
onMounted(() => {
  const savedPosition = JSON.parse(localStorage.getItem("overlayPosition"));
  if (savedPosition) {
    position.top = savedPosition.top;
    position.left = savedPosition.left;
  }
  // 根据当前路径设置初始消息
  updateMessageByPath(route.path);
});

// 添加一个函数来根据路径更新消息
const updateMessageByPath = (path) => {
  if (path === "/learning/simulator/fltctl") {
    message.value =
      "快捷键：\n←：左滚转\n→：右滚转\n↑：飞机抬头\n↓：飞机低头\nA：左偏航\nD：右偏航\nQ：安定面前缘向下\nE：安定面前缘向上\nZ：方向舵配平\nC：方向舵配平";
  } else if (
    path === "/learning/simulator/" ||
    path === "/learning/simulator/UpperDu"
  ) {
    message.value =
      "快捷键：\nF1：启动\nF2：减速\nF3：加速\nF4：最大推力\nF5：襟翼全收\nF6：收襟翼\nF7：放襟翼\nF8：襟翼全放\nF9：关车\nG：收放起落架";
  } else if (path === "/learning/simulator/fuel") {
    message.value =
      "快捷键：\nQ：设置前交输活门\nW：设置后交输活门\nE：设置中央油箱左泵\nR：设置中央油箱右泵\nA：设置左油箱前泵\nS：设置左油箱后泵\nD：设置右油箱前泵\nF：设置右油箱后泵";
  } else if (path === "/learning/simulator/elec") {
    message.value =
      "快捷键：\nQ：设置左BUS TIE\nW：设置右BUS TIE\nE：设置厨房/通用汇流条\nR：设置左发电机\nT：设置右发电机\nA：设置APU发电机\nS：设置左备用发电机\nD：设置右备用发电机\nF：设置次级地面电源\nG：设置主级地面电源";
  } else if (path === "/learning/simulator/hyd") {
    message.value = "快捷键：\n鼠标点击进行设置";
  }
};

const handleSelect = (key) => {
  activeIndex.value = key;
  updateMessageByPath(key); // 使用相同的函数更新消息
  router.push(key);
};

const extractNumber = (str) => {
  // 将字符串按换行符分割成数组
  const lines = str.split("\n");

  // 初始化一个变量来存储最大长度
  let maxLength = 0;

  // 遍历每一行
  for (let line of lines) {
    // 计算当前行的长度
    const lineLength = line.length;

    // 更新最大长度
    if (lineLength > maxLength) {
      maxLength = lineLength;
    }
  }

  // 返回最长行的长度
  return maxLength;
};

const extractLines = (str) => {
  // 将字符串按换行符分割成数组
  const lines = str.split("\n");
  return lines.length;
};

const onMouseDown = (event) => {
  event.preventDefault();
  dragging.value = true;

  const container = document.querySelector(".simulator_container");
  const rect = container.getBoundingClientRect();

  offset.x = event.clientX - rect.left - position.left;
  offset.y = event.clientY - rect.top - position.top;

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
};

const onMouseMove = (event) => {
  if (dragging.value) {
    const container = document.querySelector(".simulator_container");
    const rect = container.getBoundingClientRect();

    const newLeft = event.clientX - rect.left - offset.x;
    const newTop = event.clientY - rect.top - offset.y;

    if (
      newLeft >= 0 &&
      newLeft <= rect.width &&
      newTop >= 0 &&
      newTop <= rect.height
    ) {
      position.left = newLeft;
      position.top = newTop;
    }
  }
};

const onMouseUp = () => {
  dragging.value = false;
  // 保存位置到 localStorage
  localStorage.setItem("overlayPosition", JSON.stringify(position));
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
};

const handleMouseMove = (event) => {
  const container = document.querySelector(".simulator_container");
  const rect = container.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
};
</script>

<style scoped>
.simulator_container {
  background-color: rgb(2, 4, 16);
  width: 646px;
  height: 620px;
  margin: auto;
  position: relative;
  user-select: none; /* Disable text selection on double-click */
}

.my_menu {
  width: 100%;
}

.overlay {
  position: absolute;
  padding: 20px;
  z-index: 10;
}

.simulator_container,
.simulator_container * {
  color: rgba(255, 255, 245, 0.86);
}
.training-notice {
  margin-top: -1px;
  padding-top: 5px;
  padding-left: 10px;
  color: red;
}
</style>
